<template>
    <div>
        <div class="title">推荐歌单</div>
        <!-- 推荐歌单图片 -->
        <div class="recommand">
            <van-grid :border="false" :column-num="3">
                <van-grid-item v-for="item in 6" :key="item.id">
                    <van-image :src="item.picUrl" />
                    <div class="song_name">222</div>
                </van-grid-item>

            </van-grid>
        </div>
        <div class="title">最新音乐</div>
        <!-- 最新音乐 -->
        <div class="zxyy" v-for="item in 12" :key="item.id">
            <!-- 一行一行的样式就是cell -->
            <van-cell center title="11" value="内容" label="描述信息">
                <template #right-icon>
                    <van-icon name="play-circle-o" class="search-icon" />
                </template>
            </van-cell>
        </div>
    </div>
</template>

<script>

export default {
    name: 'HoMe',
   
    data() {
        return {
            
        }
    },
    methods: {
        
    }
}
</script>

<style>
/* 标题 */
.title {
    padding: 10px 15px;
    margin: 0 0 15px 0;
    background-color: #eee;
    color: #333;
    font-size: 15px;
}

/* 推荐歌单 - 歌名 */
.song_name {
    font-size: 16px;
    padding: 0 5px;
    margin-bottom: 10px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2;
    /** 显示的行数 **/
    overflow: hidden;
    /** 隐藏超出的内容 **/
}

.search-icon {
    font-size: 25px;
    line-height: inherit;
}
</style>